/*
 * @Description: 
 * @Author: Zhang Zhangda
 * @Date: 2021-03-08 10:59:04
 * @LastEditTime: 2021-03-09 11:22:43
 * @LastEditors: Zhang Zhaoda
 */
import { Form, Input, Select, Button } from 'antd';
import { FC, Fragment} from "react";
import {useSelector} from "react-redux"
import Editor from 'for-editor';

import {Istore} from "../addexcal/addexcal"
const { Option } = Select;
interface Iprops{
  onFinish:(values:any)=>void;
  onFinishFailed:(values:any)=>void;
  form:any;
  defaultValue:any
}

const layout = {
  labelCol: { span: 8 },
  
};
let FormItem:FC<Iprops>=({onFinish,onFinishFailed,form,defaultValue})=>{
  let { allQuestionsType, QuestionsType, allSubject } = useSelector(({ excal }: Istore) => excal);

  return (
    <Fragment>
       <h2>题目信息</h2>
          <Form
            {...layout}
            form={form}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            initialValues={defaultValue}
          >

            <h1>题干</h1>
            <Form.Item
              wrapperCol={{ span: 12 }}
              name="title"
              rules={[{ required: true, message: '请输入不超过20个字的题目标题', max: 20 }]}
            >
              <Input style={{boxShadow:'1px 1px 5px #ccc'}} placeholder='请输入题目标题,不超过20字' />
            </Form.Item>

            <h1>题目主题</h1>
            <Form.Item
              name='questions_stem'
              rules={[{ required: true, message: '请输入题目主题' }]}
            >
              <Editor height='400px' />
              {/* <Input.TextArea rows={10} /> */}
            </Form.Item>

            <h1>请选择考试类型</h1>
            <Form.Item
              wrapperCol={{ span: 5 }}
              name='exam_id'

            >
              <Select style={{boxShadow:'1px 1px 5px #ccc'}}>
                {
                  allQuestionsType.length !== 0 ?
                    allQuestionsType.map((item, index) => {
                      return (
                        <Option
                          value={item.exam_id}
                          key={item.exam_id}
                        >
                          {item.exam_name}
                        </Option>
                      )
                    }) : null
                }
              </Select>
            </Form.Item>

            <h1>请选择课程类型</h1>
            <Form.Item
              wrapperCol={{ span: 5 }}
              name='subject_id'
            >
              <Select style={{boxShadow:'1px 1px 5px #ccc'}}>
                {
                  allSubject.length !== 0 ?
                    allSubject.map((item, index) => {
                      return (
                        <Option
                          value={item.subject_id}
                          key={item.subject_id}
                        >
                          {item.subject_text}
                        </Option>
                      )
                    }) : null
                }
              </Select>
            </Form.Item>

            <h1>请选择请选择题目类型</h1>
            <Form.Item
              wrapperCol={{ span: 5 }}
              name='questions_type_id'
            >
              <Select style={{boxShadow:'1px 1px 5px #ccc'}}>
                {
                  QuestionsType.length !== 0 ?
                    QuestionsType.map((item, index) => {
                      return (
                        <Option
                          value={item.questions_type_id}
                          key={item.questions_type_id}
                        >
                          {item.questions_type_text}
                        </Option>
                      )
                    }) : null
                }
              </Select>
            </Form.Item>

            <h1>答案信息</h1>
            <Form.Item
              name='questions_answer'
              rules={[{ required: true, message: '请输入答案信息' }]}

            >
              <Editor  height='400px' />
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                style={{ margin: '10px 0', width: '100px', borderRadius: '5px' }}
              >
                提交
            </Button>
            </Form.Item>
          </Form>
    </Fragment>
  )
} 
export default FormItem